import {AJAX} from "../util/ajax.js";
import {URL} from "../router/config.js";
import {newTagLoad, removeAllChild} from "../util/utils.js";

(function () {
    InitStudyPage();

    function InitStudyPage() {
        LoadPageContent();
    }

    function LoadPageContent() {
        let element = document.querySelector("#content");
        AJAX.post({
            url: URL.HOST_URL() + URL.STUDY_PAGE_CONTENT,
            async: false,
            success: function (data) {
                let parse = JSON.parse(data);
                removeAllChild(element);
                for (const parseElement of parse) {
                    parseElement.handle = {
                        readCallback: function (element, url) {
                            newTagLoad(url);
                        }, downLoadUrl: function (element, url) {
                            newTagLoad(url);
                        }
                    };
                    element.appendChild(templates(parseElement));
                }
            }
        })

    }


    function templates(data = {
        title: "",
        items: [{bookImg: "", bookName: "", readUrl: "", downLoadUrl: ""}],
        handle: [{
            readCallback: function (element, url) {

            }, downloadCallCallBack: function (element, url) {

            }
        }]
    }) {
        let studyItem = document.createElement("section");
        studyItem.className = "study-item";

        let studyItemHeader = document.createElement("header");
        studyItemHeader.className = "study-item-header";
        studyItemHeader.innerText = data.title;
        studyItem.appendChild(studyItemHeader);

        let panel = document.createElement("div");
        panel.className = "panel";

        let studyItemList = document.createElement("ul");
        studyItemList.className = "horizontal study-item-list";

        for (const item of data.items) {
            let studyItemContent = document.createElement("li");
            studyItemContent.className = "study-item-content";

            let studyBookImg = document.createElement("img");
            studyBookImg.className = "study-book-main-img";
            studyBookImg.src = item.bookImg;
            studyBookImg.alt = item.bookName;
            studyItemContent.appendChild(studyBookImg);

            let studyBookName = document.createElement("p");
            studyBookName.className = "study-book-name";
            studyBookName.innerText = item.bookName;
            studyItemContent.appendChild(studyBookName);

            let studyBookHandle = document.createElement("div");
            studyBookHandle.className = "study-book-handle";

            let readBtn = document.createElement("button");
            readBtn.className = "btn btn-info study-book-read-online";
            readBtn.innerText = "在线阅读";
            readBtn.addEventListener("click", function () {
                data.handle.readCallback(readBtn, item.readUrl);
            });

            let downloadBtn = document.createElement("button");
            downloadBtn.className = "btn btn-primary study-book-read-download";
            downloadBtn.innerText = "下载";
            downloadBtn.addEventListener("click", function () {
                data.handle.readCallback(downloadBtn, item.downLoadUrl);
            });

            studyBookHandle.appendChild(readBtn);
            studyBookHandle.appendChild(downloadBtn);

            studyItemContent.appendChild(studyBookHandle);

            studyItemList.appendChild(studyItemContent);
        }

        panel.appendChild(studyItemList);

        studyItem.appendChild(panel);

        return studyItem;
    }
})(window);
